<template>
  <div class="xlflist">
    <div class="d-title">
      <p>{{ title }}</p>
      <span>{{ subhead }}</span>
    </div>
    <ul class="d-content">
      <li :class="classname" v-for="(v, i) in dlist" :key="i">
        <div
          class="d-pic"
          :style="{
            height: dline == 2 ? '350px' : '200px',
            background: 'url(' + v.img + ') no-repeat center center',
          }"
          @click="clickvideoi(i)"
        >
          <div class="videoblackbox" v-if="video"></div>
        </div>
        <div class="d-message">
          <p class="line-one">{{ v.title }}</p>
          <div class="line-two">{{ v.subhead }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "xlflist",
  data() {
    return {
      total: 10,
      classname: "li-four",
    };
  },
  props: ["title", "subhead", "dlist", "dline", "video"],
  created() {
    this.$nextTick(() => {
      this.getline();
      this.listen();
      window.onresize = () => {
        this.listen();
      };
    });
  },
  mounted() {},
  methods: {
    clickvideoi(i) {
      this.$emit("changevideo", i);
    },
    getline() {
      if (this.dline == 2) {
        this.classname = "li-two";
      } else if (this.dline == 3) {
        this.classname = "li-three";
      } else if (this.dline == 4) {
        this.classname = "li-four";
      }
    },
    listen() {
      let clientWidth = document.body.clientWidth;
      switch (this.dline) {
        case 4:
          if (830 < clientWidth && clientWidth < 1100) {
            this.classname = "li-three";
          } else if (clientWidth < 830) {
            this.classname = "li-two";
          } else if (clientWidth > 1100) {
            this.classname = "li-four";
          }
          break;
        case 3:
          if (830 < clientWidth && clientWidth < 1100) {
            this.classname = "li-three";
          } else if (clientWidth < 830) {
            this.classname = "li-two";
          }
          break;
      }
    },
  },
};
</script>

<style lang='less' scoped>
@cmain: #784312;
@color1: #cccccc;
@color2: #666666;
.xlflist {
  max-width: 1200px;
  margin: 80px auto 20px;
  transition: all 0.5s;
  zoom: 1;
  .d-title {
    text-align: center;
    color: @cmain;
    margin-bottom: 100px;
    > p:first-child {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    > span:last-child {
      font-size: 20px;
    }
  }
  .d-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    > .li-four {
      width: 23.3333%;
      margin: 0 2% 50px 0;
    }
    > .li-four:nth-child(4n) {
      margin-right: 0;
    }
    > .li-three {
      width: 32%;
      margin: 0 2% 50px 0;
    }
    > .li-three:nth-child(3n) {
      margin-right: 0;
    }
    > .li-two {
      width: 49%;
      margin: 0 2% 50px 0;
    }
    > .li-two:nth-child(2n) {
      margin-right: 0;
    }
    > li:hover {
      box-shadow: 0 10px 20px 5px #ccc;
    }
    > li {
      transition: all 0.5s;
      cursor: pointer;
      .d-pic {
        position: relative;
        height: 200px;
        background-size: cover !important;
        .videoblackbox {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 88;
          background: rgba(0, 0, 0, 0.5) url(../assets/images/videozhezao.png)
            no-repeat center center;
          width: 100%;
          height: 100%;
        }
      }
      .d-message {
        padding: 25px 20px;
        border: 1px solid @color1;
        > p:first-child {
          font-size: 20px;
          font-weight: bold;
          color: @cmain;
          margin-bottom: 20px;
        }
        > div:last-child {
          font-size: 14px;
          color: @color2;
          line-height: 30px;
          height: 60px;
        }
      }
    }
  }
}
// @media screen and(min-width: 350px) and(max-width: 750px) {
//   .xlflist{
//     zoom: 0.5;
//   }
// }
// @media screen and(max-width: 350px) {
//   .xlflist{
//     zoom: 0.3;
//   }
// }
</style>
